<template>
  <view class="content">

    <!-- 搜索区域 -->
    <search></search>

    <!-- 轮播图区域 -->
	<swiper class="swiper">
		<swiper-item>
			<navigator url="">
				<image src="/static/uploads/banner1.png"></image>
			</navigator>
		</swiper-item>
		<swiper-item>
			<navigator url="">
				<image src="/static/uploads/banner2.png"></image>
			</navigator>
		</swiper-item>
		<swiper-item>
			<navigator url="">
				<image src="/static/uploads/banner3.png"></image>
			</navigator>
		</swiper-item>
	</swiper>

	<!-- 导航区域 -->
	<view class="nav">
		<navigator url="">
			<image src="/static/uploads/icon_index_nav_1@2x.png"></image>
		</navigator>
		<navigator url="">
			<image src="/static/uploads/icon_index_nav_2@2x.png"></image>
		</navigator>
		<navigator url="">
			<image src="/static/uploads/icon_index_nav_3@2x.png"></image>
		</navigator>
		<navigator url="">
			<image src="/static/uploads/icon_index_nav_4@2x.png"></image>
		</navigator>
	</view>

	<!-- 楼层区域 -->
	<view class="floors">
		<!-- 第一层 -->
		<view class="item first">
			<view class="title">
				<image src="/static/uploads/pic_floor01_title.png"></image>
			</view>
			<view class="imgs">
				<navigator url="">
					<image src="/static/uploads/pic_floor01_1@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor01_2@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor01_3@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor01_4@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor01_5@2x.png"></image>
				</navigator>
			</view>
		</view>

		<!-- 第二层 -->
		<view class="item">
			<view class="title">
				<image src="/static/uploads/pic_floor02_title.png"></image>
			</view>
			<view class="imgs">
				<navigator url="">
					<image src="/static/uploads/pic_floor02_1@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor02_2@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor02_3@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor02_4@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor02_5@2x.png"></image>
				</navigator>
			</view>
		</view>

		<!-- 第三层 -->
		<view class="item">
			<view class="title">
				<image src="/static/uploads/pic_floor03_title.png"></image>
			</view>
			<view class="imgs">
				<navigator url="">
					<image src="/static/uploads/pic_floor03_1@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor03_2@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor03_3@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor03_4@2x.png"></image>
				</navigator>
				<navigator url="">
					<image src="/static/uploads/pic_floor03_5@2x.png"></image>
				</navigator>
			</view>
		</view>
	</view>


  </view>
</template>

<script>
// 导入封装好的搜索组件
import search from '@/components/search.vue'

export default {
  data() {
    return {};
  },

  // 注册组件
  components: {
    search
  }
};
</script>

<style lang="less">
// 轮播图
.swiper {
	height: 340rpx;	
	image {
		width: 750rpx;
		height: 340rpx;
	}
}

// 导航
.nav {
	display: flex;
	navigator {
		flex: 1;
		display: flex;
		justify-content: center;
		
		image {
			width: 128rpx;
		    height: 140rpx;
			margin: 24rpx 0 29rpx;
		}
	}
}

// 楼层
.item {
	.title {
		box-sizing:border-box;
		padding-top: 20rpx;
		padding-left: 16rpx;
		background-color: #f6f3f6;
		image {
			height: 60rpx;
			width: 100%;
		}
	} 

	.imgs {
		box-sizing: border-box;
		padding: 20rpx 12rpx;
		overflow: hidden;
		navigator {
			float: left;
			margin-right: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}

		// 1
		navigator:nth-child(1) {
			width: 232rpx;
			height: 386rpx;
		}
		// 2 5
		navigator:nth-child(2), 
		navigator:nth-child(5) {
			width: 273rpx;
			height: 188rpx;
		}
		// 3 4 
		navigator:nth-child(3), 
		navigator:nth-child(4) {
			width: 203rpx;
			height: 188rpx;
		}
		// 3 5 没有 margin-right
		navigator:nth-child(3), 
		navigator:nth-child(5) {
			margin-right: 0;
			margin-bottom: 10rpx;
		}
		// 
		navigator:nth-child(2), 
		navigator:nth-child(4) {
			margin-bottom: 10rpx;
		}
	}
}

// 第一层
.first {
	.imgs {
		// 2 3 4 5 图片改变宽 高
	    // n:从0开始，n放在前面，放在后面虽然不会报错，但是没有效果
		navigator:nth-child(n+2) {
			width: 236rpx;
			height: 188rpx;
		}
	} 
}
</style>
